<template>
	<view class="mainbox">
	<view class="image1">
		<image :src="img1" mode="" @click="chooseimg" class="image"></image>
	</view>
	<view class="button" @click="changeimg">
		AI处理
	</view>
	<view class="image2">
		<image :src="img2" mode="" class="image"></image>
	</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	let img1 = ref("")
	let img2 = ref("")
	let chooseimg =()=>{
		uni.chooseImage({
			success:(f) =>{
				console.log(f.tempFilePaths[0]);
				img1.value = f.tempFilePaths[0]
			}
		})
	}
	let changeimg =()=>{
		uni.uploadFile({
			url:"http://127.0.0.1:7001/changepic",
			filePath:img1.value,
			name:"pic",
			formData:{},
			success: (res) => {
				console.log(res);
				console.log(JSON.parse(res.data));
				img2.value = JSON.parse(res.data).url
			}
		})
	}
</script>

<style>
	.mainbox{
		width: 750rpx;
		height: 1199rpx;
		background-color: aliceblue;
		overflow: hidden;
	}
	.image1{
		width: 500rpx;
		height: 400rpx;
		background-color: aquamarine;
		margin-top: 50rpx;
		margin-left: 125rpx;
		border-radius: 20rpx;
	}
	.image2{
		width: 500rpx;
		height: 400rpx;
		background-color: lightskyblue;
		margin-top: 50rpx;
		margin-left: 125rpx;
		border-radius: 20rpx;
	}
	.button{
		width: 150rpx;
		height: 100rpx;
		background-color: azure;
		margin-left: 300rpx;
		border-radius: 20rpx;
		text-align: center;
		font-size: 40rpx;
		line-height: 100rpx;
		margin-top: 40rpx;
		background-color: darkblue;
		color: white;
	}
	.image{
		width: 500rpx;
		height: 400rpx;
		border-radius: 20rpx;
	}
</style>
